<template>
  <div class="app">
<!-- <h1>我的</h1> -->
<div class="top-img">
 <div>
    <img src="../assets/我的/信封.png" alt="">
 </div>
 <div>
   <img src="../assets/我的/导航.png" alt="">
 </div>
</div>
<div class="headPortrait">
<div>
  <div><img src="../assets/我的/d.jpg" alt=""></div>
  <div>
    <h6>optimistic</h6>
    <p>编辑个人资料</p>
  </div>
</div>
<div>
  <p>主页</p>
  <img src="../assets/我的/尖角号 (1).png" alt="">
</div>
</div>
<div class="personageAccount">
  <div>
    <div><img src="../assets/我的/我的账户.png" alt=""></div>
    <div>
      <h6>账户</h6>
      <p>余额：5.00</p>
    </div>
  </div>

  <div>
    <div><img src="../assets/我的/无限卡.png" alt=""></div>
    <div>
      <h6>无限卡</h6>
      <p>9元/月</p>
    </div>
  </div>

   <div>
    <div><img src="../assets/我的/购物车.png" alt=""></div>
    <div>
      <h6>购物车</h6>
      <p>添加商品</p>
    </div>
  </div>

   <div>
    <div><img src="../assets/我的/订单.png" alt=""></div>
    <div>
      <h6>订单</h6>
      <p>管理订单</p>
    </div>
  </div>

</div>
<div class="centerBoxImg">
  <div>
  <div> <img src="../assets/我的/读书排行榜.png" alt=""></div>
  <div> <h6>读书排行榜</h6></div>
  <div> <p>本周尚未开始阅读</p></div>
  </div>
  <div>
  <div> <img src="../assets/我的/关注.png" alt=""></div>
  <div> <h6>关注</h6></div>
  <div> <p>1人关注我</p></div>
  </div>
</div>

<div class="centerBoxImg">
  <div>
  <div> <img src="../assets/我的/勋章.png" alt=""></div>
  <div> <h6>勋章</h6></div>
  <div></div>
  </div>
  <div>
  <div> <img src="../assets/我的/笔记.png" alt=""></div>
  <div> <h6>笔记</h6></div>
  <div></div>
  </div>
  <div>
  <div> <img src="../assets/我的/阅读记录.png" alt=""></div>
  <div> <h6>阅读记录</h6></div>
  <div> </div>
  </div>
</div>

<div class="centerBoxImg">
  <div>
  <div> <img src="../assets/我的/青少年模式.png" alt=""></div>
  <div> <h6>青少年模式</h6></div>
  <div></div>
  </div>
  <div>
  <div> <img src="../assets/我的/联系客服.png" alt=""></div>
  <div> <h6>客服</h6></div>
  <div></div>
  </div>
  <div>
  <div> <img src="../assets/我的/关于斑马.png" alt=""></div>
  <div> <h6>关于斑马</h6></div>
  <div> </div>
  </div>
</div>

 <tabbar page="Mine"/>
  </div>
</template>

<script>
// npm i pubsub-js 下载并引入
import pubsub from "pubsub-js"
// npm i axios  全局安装axios 并引入
import axios from "axios"
import tabbar from "../components/tabbar.vue" 

export default {
    name:"Mine",
    data() {
        return {
            
        }
    },
    components:{
      tabbar
    },
    props:[],
    methods: {
        
    },
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
    background-color: #F6F6F6;
  }
  .app{
      width: 99.5%;
      /* border: 1px solid red;  */
  }
  .top-img{
      margin: 0 auto;
    width: 98%;
    /* border: 1px solid rgb(46, 9, 9); */
    display: flex;
    justify-content: space-between;
  }
  .top-img>div{
    width: 8%;
    height: 30px;
    /* border: 1px solid black; */
  }
  .top-img>div>img{
    width: 100%;
    height: 100%;
  }
  .headPortrait{
      width: 100%;
      display: flex;
      justify-content: space-around;
      /* border: 1px solid red; */
      padding: 15px 0;
      margin: 10px 0 0 0;
  }
  .headPortrait>div:nth-child(1){
      width: 60%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* border: 1px solid blue; */
  } 
  .headPortrait>div:nth-child(2){
      width: 30%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      /* border: 1px solid blue; */
  } 
  .headPortrait>div:nth-child(2)>img{
    width: 25px;
    height: 25px;
  }
  .headPortrait>div:nth-child(1)>div:nth-child(1){
     width: 35%;
     height: 85px;
     border-radius: 50%;
     /* border: 2px solid rgb(226, 26, 49); */
  }
  .headPortrait>div:nth-child(1)>div:nth-child(2){
     width: 60%;
     display: flex;
     flex-direction: column;
     /* border: 1px solid goldenrod; */
  }
  .headPortrait>div:nth-child(1)>div:nth-child(1)>img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
  }
  .headPortrait>div:nth-child(1)>div:nth-child(2)>h6{
    font-size: 20px;
    line-height: 30px;
  }
  .headPortrait>div:nth-child(1)>div:nth-child(2)>p{
    font-size: 13px;
  }
  .personageAccount{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    /* border: 1px solid red; */
  }
  .personageAccount>div{
    width: 45%;
    display: flex;
    justify-content:flex-start;
    background-color: #ffffff;
    align-items: center;
    /* border: 1px solid blue; */
    padding: 15px 0;
    border-radius: 10px;
    margin: 10px 0;
  }
  .personageAccount>div>div:nth-child(1){
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    /* border: 1px solid black; */
    margin: 0 10px;
  }
  .personageAccount>div>div:nth-child(2){
    background-color: #ffffff;
  }
  .personageAccount>div>div:nth-child(2)>h6{
    background-color: #ffffff;
    line-height: 30px;
    font-size: 20px;
   font-family: 'Courier New', Courier, monospace;
  }
  .personageAccount>div>div:nth-child(2)>p{
    background-color: #ffffff;
    font-size: 13px;
    color: rgb(98, 98, 98);
   /* font-family: 'Courier New', Courier, monospace; */
  }
  .personageAccount>div>div:nth-child(1)>img{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
  }
  .centerBoxImg{
    width: 92%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    margin: 18px auto;
    border-radius: 10px;
    /* border: 1px solid red; */
  }
  .centerBoxImg>div{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-around;
    /* border: 1px solid blue;   */
    background-color: #ffffff;
  }
  .centerBoxImg>div>div{
    display: flex;
    align-items: center;
    justify-content:space-around;
    /* border: 1px solid rgb(209, 39, 39);   */
    background-color: #ffffff;
  }
  .centerBoxImg>div>div:nth-child(2){
    width: 30%;
    display: flex;
    justify-content: flex-start;
    /* border: 1px solid orchid; */
  }
  .centerBoxImg>div>div:nth-child(2)>h6{
    background-color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    /* font-family: 'Courier New', Courier, monospace; */
  }
  .centerBoxImg>div>div:nth-child(3){
    width: 40%;
    display: flex;
    justify-content: flex-end;
    /* border: 1px solid orchid; */
    margin: 0 10px 0 0;
  }
  .centerBoxImg>div>div:nth-child(3)>p{
    background-color: #ffffff;
    color: rgb(103, 102, 102);
  }
  .centerBoxImg>div>div:nth-child(1){
    width: 65px;
    height: 60px;
    /* border: 1px solid black; */
    margin: 10px;
  }
  .centerBoxImg>div>div>img{
    width: 100%;
    height: 100%;
  }
</style>